<template>
	<view class=" pb30">
		<nav-bar leftIcon="" title="订单" color="#22" backgroundColor="#fff" navbarbg="#fff"></nav-bar>
		<view class="order-nav">
			<u-tabs :list="statusList" scrollable="false" @click="changeTab" :activeStyle="{
			    color: '#BFB49B'
			 }" lineColor="#BFB49B" itemStyle="width:33%;line-height:80rpx;font-size:28rpx;color:#222;">
			</u-tabs>
		</view>
		<mescroll-uni ref="mescroll" @getData="getListData" :top="navHeight" bottom="88">
			<block slot="list">
				<block v-if="listData.length > 0">
					<view class="order-list">
						<view class="order-item" v-for="(item,index) in listData" :key="index"
							@click="CreateOrder(item)">
							<view class="order-top u-flex u-flex-between">
								<view class="text u-flex">
									<text>{{item.storeName}}</text>
									<w-icon type="more" color="#222" size="26rpx"></w-icon>
								</view>
								<view class="order-status">{{item.orderStatus | orderStatus}}</view>
							</view>
							<view class="order-good pad20 u-flex" v-for="(good,idx) in item.orderGoodsList" :key="idx">
								<view class="img">
									<image :src="good.goodsImage" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="good-name">
										{{good.goodsTitle}}
									</view>
									<view class="sub u-flex u-flex-between">
										<view class="">
											<text>{{good.goodsPropery}}</text>
											<!-- <text>大杯</text><text>热</text><text>半糖</text> -->
										</view>
										<view class="num">
											x{{good.goodsQuantity}}
										</view>
									</view>
									<view class="good-msg u-flex">
										<image :src="imgUrl+'member.png'" mode=""></image>
										<text class="now-price">¥{{good.costPrice}}</text>
										<text class="or-price">¥ {{good.goodsPrice}}</text>
									</view>
								</view>
							</view>
							<view class="bottom">
								订单编号：<text>{{item.orderCode}}</text>
							</view>
						</view>
					</view>
				</block>
				<block v-if="listData.length==0&&loader">
					<u-empty marginTop="100" :text="emptyTips" mode="list"></u-empty>
				</block>

			</block>
		</mescroll-uni>

		<!-- 	<view class="order-batch-operation" :class="{ 'bottom-safe-area': isIphoneX }" v-if="mergePayOrder.length">
			<view class="operation-btn ns-text-color ns-border-color" @click="mergePay">合并付款</view>
		</view> -->
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	import wIcon from '@/components/w-icon.vue'
	export default {
		components: {
			navBar,
			wIcon
		},
		data() {

			return {
				imgUrl: this.imgUrl,
				emptyTips: "还没有订单～",
				statusList: [{
					id: 0,
					status: 99,
					name: "全部订单"
				}, {
					id: 1,
					status: 1,
					name: "待付款"
				}, {
					id: 2,
					status: 2,
					name: "待提货"
				}],
				status: 0,
				listData: [],
				loader: false
			}
		},
		filters: {
			orderStatus(status) {
				if (status == 9) {
					return "交易关闭"
				} else if (status == 8) {
					return "已取消(退款)"
				} else if (status == 7) {
					return "已完成"
				} else if (status == 5) {
					return "申请取消"
				} else if (status == 4) {
					return "退款成功"
				} else if (status == 3) {
					return "退款中"
				} else if (status == 2) {
					return "已付款"
				} else if (status == 1) {
					return "待付款"
				}
			}
		},
		computed: {
			navHeight() {
				const res = uni.getSystemInfoSync();
				return (res.statusBarHeight + 44 + uni.upx2px(80)) + 'px'
			}
		},
		created() {
			if (!uni.getStorageSync("isLogin")) {
				uni.showModal({
					content: "您还没有登录，请先登录！",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/commer/wxlogin"
							})
						}
					}
				})
			}
		},
		methods: {
			CreateOrder(e) {
				console.log(e)

				uni.navigateTo({
					url: '/pages/order/placeOrder?id=' + e.orderCode
				})
				return

				if (e.orderStatus == 1) {

					var obj = {
						"orderCode": e.orderCode,
						"payMethod": e.paymethod,
						"id": e.id,
						"payCardNO": e.payCardNO
					}
					uni.showLoading({
						title: '支付中'
					})

					this.$http.OrderPayment(obj).then(res => {
						let payData = JSON.parse(res.content.paymentrequest)
						console.log(res)
						console.log(payData)
						uni.hideLoading()
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: payData.timeStamp.toString(),
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: res => {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
								uni.hideLoading()
								setTimeout(() => {
									this.getListData()
								}, 1000)
							},
							complete: res => {
								uni.hideLoading()

							}
						});

					})
				} else {
					if (e.orderStatus == 2) {

						return
					}
				}

			},

			changeTab(e) {

				this.status = e.status;
				this.$refs.mescroll.refresh();
			},
			getListData(mescroll) {

				this.$http.MyOrdersByAPP({
						pagesize: mescroll.size,
						pageindex: mescroll.num,
						status: this.status
					})
					// this.$http.GetProductList({
					// 	tagid:2,
					// 	pagesize:mescroll.size,
					// 	pageindex:mescroll.num,
					// 	storeId:6
					// })
					.then(res => {
						if (res.code == 0) {
							let newArr = []
							// res.content = [{
							// 	confrimReceiveTime:"2022-12-04 18:00:00",
							// 	orderCode:"221204172627949417",
							// 	orderBaseId:18905,
							// 	orderGoodsList:[{
							// 		costPrice:"151.3",
							// 		goodsBaseId:"313",
							// 		goodsImage:"https://img.donco.com.cn/product/1641454138266FXSA.jpg",
							// 		goodsPrice:178,
							// 		goodsPropery:"6英寸",
							// 		goodsQuantity:0,
							// 		goodsTitle:"花漾莓好（6寸）",
							// 		productBaseId:"239"
							// 	}],
							// 	orderMoney:0,
							// 	orderStatus:9,
							// 	orderType:1,
							// 	storeId:19,
							// 	storeName:"桐庐银泰店",

							// }]
							newArr = res.content;
							this.loader = true;
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = [];
							this.listData = this.listData.concat(newArr); //追加新数据
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex1 {
		flex-grow: 1;
		flex-basis: 1;
		flex-shrink: 1;
	}

	.flex0 {
		flex-grow: 0;
		flex-basis: 1;
		flex-shrink: 0;
	}

	.order-nav {
		background: #fff;
		height: 80rpx;
		position: relative;
		z-index: 10;
	}

	.order-item {
		width: 710rpx;
		margin: 20rpx auto 0;
		background: #fff;
		border-radius: 10rpx;

		.order-top {
			height: 80rpx;
			padding: 0 20rpx;
			line-height: 80rpx;

			.text {
				// line-height: 80rpx;
				font-size: 26rpx;
				color: #444444;
			}

			.order-status {
				font-size: 26rpx;
				color: #BFB49B;
			}
		}

		.pad20 {
			padding: 0 20rpx;
		}

		.order-good {
			margin-top: 20rpx;

			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				margin-left: 20rpx;
				width: 515rpx;

				.good-name {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-size: 28rpx;
					columns: #222;
					line-height: 50rpx;
				}

				.sub {
					font-size: 24rpx;
					color: #888;
					line-height: 40rpx;
				}

				.good-msg {
					image {
						width: 56rpx;
						height: 27rpx;
					}

					.now-price {
						font-size: 24rpx;
						color: #222;
						margin-left: 20rpx;
					}

					.or-price {
						font-size: 20rpx;
						color: #888;
						margin-left: 20rpx;
						line-height: 30rpx;
					}
				}

			}

		}

		.bottom {
			height: 80rpx;
			border-top: 1px solid #f7f7f7;
			padding: 0 20rpx;
			line-height: 80rpx;
			font-size: 22rpx;
			color: #888;
			margin-top: 15rpx;
		}
	}
</style>
